<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级下拉列表联动</title>
    <script type="text/javascript">
        var  provinces=['黑龙江','河北','河南','浙江','日本'];
        var citesArrByProvinces=
            [
                ['哈尔滨','齐齐哈尔','牡丹江','佳木斯','大庆'],
                ['石家庄','保定','邢台','衡水','唐山'],
                ['濮阳','郑州','驻马店','信阳','焦作'],
                ['东京热','北海道','一本道','桃太郎','天使之城']
            ];
        function initProvinceSelect() {
            // 1.造
            var selectObj=document.createElement('select');
            var option =document.createElement('option');
            // 2.改
            selectObj.id='provinceSelect';
            option.setAttribute('value',-1);
            option.innerHTML="请选择";
            selectObj.onchange=function(){
                document.getElementById('citySelect').innerHTML="";
                createCityOptionList(document.getElementById('citySelect'),selectObj.value)
            }
            // 3.放
            selectObj.appendChild(option);
            document.body.appendChild(selectObj);
            createOptionList(selectObj);
            initCitySelect();
        }
        function initCitySelect() {//建立市级联表
            // 1.造
            var selectObj=document.createElement('select');
            var option =document.createElement('option');
            // 2.改
            selectObj.id='citySelect';
            option.setAttribute('value',-1);
            option.innerHTML="请选择";
            // 3.放
            selectObj.appendChild(option);
            document.body.appendChild(selectObj);
        }
        function createCityOptionList(selectObj,province) {
            for(var i=0;i< citesArrByProvinces[province].length;i++){
                selectObj.options.add(new Option(citesArrByProvinces[province][i],i));
            }
        }
        function createOptionList(selectObj) {//导入省级信息
            for(var i=0;i<provinces.length;i++){
                //1.造
                var option=document.createElement('option');
                //2.改
                option.setAttribute('value',i);
                     //上句也可以写成：
                     // option.value=i;
                option.innerHTML=provinces[i];
                //3.放
                selectObj.appendChild(option);
               // selectObj.options.add(new Option(provinces[i],i));
            }
        }
    </script>
</head>
<body onload="initProvinceSelect()">

</body>
</html>